<!-- 组件之间的切换 -->

<!-- 引入vue框架 -->
<script src="./vue.js"></script>

<!-- 界面显示 -->
<div id="app">
    <a href="#" @click.prevent="flag? flag : flag =! flag">登录</a>
    <a href="#" @click.prevent="flag? flag =! flag : flag">注册</a>
    <login v-if="flag"></login>
    <reg v-else></reg>
</div>

<!-- 登陆界面模板 -->
<template id="loginTmp">
    <div>
        <table border="1">
            <tr>
                <td><label>用户名</label></td>
                <td><input type="text" id="username" maxlength="20"></td>
            </tr>
            <tr>
                <td><label>密码</label></td>
                <td><input type="password" id="pwd1" maxlength="20"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <button @click="tijiao">登录</button>
                </td>
            </tr>
        </table>
    </div>
</template>
<template id="regTmp">
    <div>
        <table border="1">
            <tr>
                <td><label>用户名</label></td>
                <td><input type="text" id="username" maxlength="20"></td>
            </tr>
            <tr>
                <td><label>密码</label></td>
                <td><input type="password" id="pwd1" maxlength="20"></td>
            </tr>
            <tr>
                <td><label>确认密码</label></td>
                <td><input type="password" id="pwd2" maxlength="20"></td>
            </tr>
            <tr>
                <td colspan="2">
                    <button @click="zhuce">注册</button>
                </td>
            </tr>
        </table>
    </div>
</template>

<!-- 定义脚本 -->
<script>
    //注册登陆组件
    Vue.component("login", {
        // template: '<div>登陆页面 <br><input type="text" placeholder="账号" style="margin: 10px"><br><input type="password" placeholder="密码" style="margin: 10px"></div>  ',
        template: '#loginTmp',
        methods:{
            tijiao(){
                alert("准备登录");
            }
        }
    })
    //注册注册组件
    Vue.component("reg", {
        // template: '<div>注册页面 <br><input type="text" placeholder="手机号/邮箱" style="margin: 10px"><br><input type="password" placeholder="密码" style="margin: 10px"></div>'
        template: '#regTmp',
        methods:{
            zhuce(){
                console.log("登录信息注册");
            }
        }
    })

    var vue = new Vue({
        el: '#app',

        data: {
            flag: true,
        }
    })
</script>

<!-- 页面样式 -->
<script>

</script>